<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .carousel {
            position: relative;
            width: 650px;
            height: 360px;
            border: 1px solid #000;
            margin: 40px auto;
        }
        
        .carousel ul {
            position: relative;
            list-style: none;
            transition: left .5s ease 0s;
            /* 设置浮动为什么不上去：宽度不够  将宽度调到最大  就成一排显示 */
            width: 9999px;
        }
        
        .carousel ul li {
            /* 设置浮动为什么不上去：宽度不够 */
            float: left;
        }
        
        .carousel .leftbtn {
            left: 20px;
        }
        
        .carousel .btn {
            position: absolute;
            width: 50px;
            height: 50px;
            top: 50%;
            margin-top: -25px;
            background-color: gold;
            border-radius: 50%;
        }
        
        .carousel .rightbtn {
            right: 20px;
        }
    </style>
</head>

<body>
    <div class="carousel">
        <ul id="list">
            <li> <img src="../images/bj/0.jpg" alt=""></li>
            <li> <img src="../images/bj/1.jpg" alt=""></li>
            <li> <img src="../images/bj/2.jpg" alt=""></li>
            <li> <img src="../images/bj/1.jpg" alt=""></li>
            <li> <img src="../images/bj/2.jpg" alt=""></li>
        </ul>
        <a href="javascript:;" class=" btn leftbtn" id="leftbtn"></a>
        <a href="javascript:;" class=" btn rightbtn" id="rightbtn"></a>
    </div>

    <script>
        // 得到按钮和ul

        var leftbtn = document.getElementById("leftbtn");
        var rightbtn = document.getElementById("rightbtn");
        var list = document.getElementById("list");
    </script>
</body>

</html>